﻿/*The outermost container, a ul list. The entire editor is nested in li elements within this unordered list*/
ul.editor
{
	background:#003c72;
	list-style-type: None;
	border-top:solid 1px #6E7277;
	border-left:solid 1px #6E7277;
	border-bottom:solid 1px #000;
	border-right:solid 1px #000;
	float: left;
	width: 100%;
	margin: 0px;
	padding: 0px;
}
/*The designarea, this is the editable area that will contain an iframe at runtime, used to host the editor*/
li.editor-designarea
{
	border-top:solid 1px #000;
	border-bottom:solid 1px #BDBEBF;
	background: #FFFFFF;
	clear: both;
	height: 200px;
}
/*The iframe hosting the html editor. This is the iframe whose designmode is set to on 
providing a UI-activated state where you can edit html at designtime eg: type text, display images etc*/
.editor-frame{}

/*The html element inside the iframe document used to host the editor*/
.editor-iframehtmlstyle,
/*The body element inside the iframe document used to host the editor*/
.editor-iframebodystyle
{
	background-color: #FFFFFF;
}
/*when clicking into the editor designview, the currently selected html element will get this style applied.*/
.editor-htmlelementhighlightstyle
{
	background: #E8F0F6;
	border:dotted 1px #5F9BAF;
}

/*the textarea in htmlview*/
textarea.editor-htmlview,
/*color highlighted htmlview*/
div.editor-htmlviewcolorhilight,
/*warnings log*/
div.editor-warningslog
{
	overflow: auto;
	background: #F5F5DC;
	border-style:none;
	border-width: 0px;
	font-family: Calibri, Helvetica, Arial;
	font-size: 16px;
}
/*The modal popup*/
table.editor-popup
{
	background: #FFFFFF;
	border:solid 2px #FFFFFF;
}
/*The header portion of the modal popup, includes the caption and the close button*/
tr.editor-popupheader
{
	background:#928f8f;
}
tr.editor-popupheader td a
{
	margin-right:5px;
	float:right;
}
/*Only the caption portion of the modal popup*/
td.editor-popupheadercaption
{
	color: #000;
	font-family: Calibri, Helvetica, Arial;
	font-size: 16px;
	height: 35px;
	padding-left: 5px;
	font-weight:bold;
}
/*holds the popup content*/
tr.editor-popupbody
{
	font-size: Medium;
}
/*dropdown container. This is what we use to dropdown a list of formatblocks,font names,font-sizes etc*/
table.editor-dropdownstyle
{
	background: #FFFFFF;
	border:solid 1px #DCDCDC;
	padding: 4px;
}
tr.editor-dropdownheaderstyle
{
	color: #000;
	font-family: Calibri, Helvetica, Arial;
	font-size: 14px;
	height: 35px;
	font-weight:bold;
}
tr.editor-dropdownheaderstyle td{}
tr.editor-dropdownheaderstyle td a
{
	float:right;
	margin-right:5px;
}
/*when an item is selected in dropdownlist?*/
li.editor-dropdownstyle-selected
{
    background:#0092d2;
}
/*The list containing menu items in the dropdownlists follow*/
ul.editor-dropdownfontsize
{
    text-align:center;
	list-style-type:none;
	width: 220px;
}
ul.editor-dropdownformatblock
{
    list-style-type:none;
	text-align: Center;
	width: 230px;
}
ul.editor-dropdownfontname
{
	list-style-image: url( "Images.Editor.fontname.gif" );
	height: 270px;
	width: 300px;
}
/*we have a custom bullet set for fontname above, so let's make space for it? 20px*/
ul.editor-dropdownfontname li
{
    margin:2px 2px 2px 20px;
}
ul.editor-dropdownspellchecker
{
	height: 250px;
	width: 230px;
	list-style-type:disc;
}
/*we have a custom bullet set for spellcheckeractive applied below, so let's make space for it? 20px*/
ul.editor-dropdownspellchecker li{margin:2px 2px 2px 25px;}
/*The currently selected language in the spellchecker  */
.editor-dropdownspellcheckeractive
{
    background-color:#0092d2;
	list-style-image: url( "Images.Editor.check.gif" );
}

ul.editor-dropdownspellsuggestion
{
	height: 90px;
	width: 150px;
}

li.editor-dropdownspellsuggestion-menu
{
	border-top: solid 1px #B2B3B5;
	background: #F7F7F6;
	font-weight: bold;
	color: Red;
	text-indent: 5px;
	height: 20px;
}
ul.editor-dropdownclassnamelist
{
    list-style-image: url( "Images.Editor.cssclassname.gif" );
	height: 180px;
	width: 200px;
}
ul.editor-dropdownclassnamelist li {margin:2px 2px 2px 30px;}
/*This is a special command menu used in the word suggestion dropdownlist ( the part displaying the ignore word button )*/
ul.editor-menulist a
{
    background:#c8e2f7;
    text-decoration:none;
    padding:2px;
}
ul.editor-menulist a:hover
{
    background:#709dc8;
    color:#e0e9e9;
    text-decoration:underline;
}
/*mouseover hover state on items in the dropdownlists*/
ul.editor-dropdownfontsize a,
ul.editor-dropdownformatblock a,
ul.editor-dropdownfontname a,
ul.editor-dropdownspellchecker a,
ul.editor-dropdownspellsuggestion a,
ul.editor-dropdownspellsuggestion a,
ul.editor-dropdownclassnamelist a
{
    text-decoration:none;
    padding:1px;
}
/*mouseover hover state on items in the dropdownlists*/
ul.editor-dropdownfontsize a:hover,
ul.editor-dropdownformatblock a:hover,
ul.editor-dropdownfontname a:hover,
ul.editor-dropdownspellchecker a:hover,
ul.editor-dropdownspellsuggestion a:hover,
ul.editor-dropdownspellsuggestion a:hover,
ul.editor-dropdownclassnamelist a:hover
{
	background: #93d2f3;
	text-decoration:underline;
}
/*toolbarsets by index*/
li.editor-0,li.editor-1,li.editor-2,li.editor-3,li.editor-4
{
	float: left;
	border:solid 1px #000;
	height: 27px;
	margin: 2px 5px 2px 2px;
	background:url(Images.Editor.ToolBarset.toolBarset-background.gif) repeat;
}
/*b element at either end of tab buttons eg: 
		<li..class=Editor1-0>
			<b class=toolbarsetleftedge></b><!--on the left edge-->
			<a class=toolbarbutton>item 1</a>
			<b class=toolbarbuttonseparator></b>
			<a class=toolbarbutton>item 2</a>
			<b class=toolbarsetrightedge></b><!--and on the right edge-->
		</li>*/
b.editor-toolbarsetleftedge{width:10px;}
b.editor-toolbarsetoptions{width:12px;}

b.editor-toolbarsetleftedge,b.editor-toolbarsetoptions,
b.editor-toolbarbuttonseparator,a.editor-toolbarbutton
{
    float:left;
	display: block;
	height: 22px;
	margin:2px;
}
a.editor-toolbarbutton
{
	border:solid 1px #EEEEEE;
	width: 22px;
}
/*the li element containing the tabcontainer eg: 
	<li class=tab>
		<div..class=tabcontainer>
			<a>tab1</a>
			<a>tab2</a>
		</div>
	</li>*/
li.editor-tab
{
	border-top:solid 1px #FFFFFF;
	float: left;
	width: 100%;
	padding: 1px;
}
/*containing all individual tabs eg: 
		<div..class=tabcontainer>
			<a>tab1</a>
			<a>tab2</a>
		</div>*/
div.editor-tabcontainer
{
	background: url(Images.Editor.Tabs.tab-background.gif) repeat-x;
	float: left;
	border:solid 1px #000;
	margin:2px;
	padding:0;
}
/*b element at either end of each toolbarset button eg: 
		<div..class=tabcontainer>
			<b class=tableftedge></b><!--on the left edge-->
			<a class=tabbutton>tab1</a>
			<a class=tabbutton>tab2</a>
		</div>*/
b.editor-tableftedge{width:10px;}
b.editor-tabbuttonseparator{width:2px;}

b.editor-tableftedge,
a.editor-tabbutton,b.editor-tabbuttonseparator
{
	display: block;
	height: 20px;
	margin:2px 1px 0 1px;
	padding:1px 0 1px 0;
}

/*each individual tab button eg: 
		<div..class=tabcontainer>
			<a class=tabbutton>tab1</a>
			<a class=tabbutton>tab2</a>
		</div>*/
a.editor-tabbutton
{
	float:left;
	border: solid 1px #000;
}
/*The style of a selected toolbar or tab button*/
a.editor-activebutton
{
	/*filter: alpha(opacity = 40);
	opacity: 0.4;*/
	border:solid 1px #FFFFFF !important;
}
/*The style of the floating toolbar. This is the container that contains all the toolbarsets and floats it*/
div.editor-floatingtoolbar
{
	background:#003c72;
	border-top:1px solid #E2E2E2;
	border-left:1px solid #E2E2E2;
	border-bottom:1px solid #878787;
	border-right:1px solid #878787;
}
/*The close button in the floating toolbar (floating toolbar is activated when explicitly setting  EnableToolBarFloat="True"*/
div.editor-floatingtoolbar a.tristateclosebutton16x48 
{
    margin:2px;
}
/*each a element represents a toolbaritem or a tab ;
we are also setting background-image on each a item in script.
Due to that if you want to use the background property you need
to use !important. border requires !important too since
it's set to transparent by default in script (applied as inline css)*/
a.editor-toolbarhoverbutton,a.editor-tabhoverbutton
{
	/*filter: alpha(opacity = 40);
	opacity: 0.4;*/
	border:solid 1px #FFFFFF !important;
}
.editor-misspelledword
{
	background: url(  "Images.Editor.underline.gif" ) repeat-x bottom left;
}

/*multifile uploader displayed via the hyperlink designer for browsing files on the server*/
ul.multifileuploaderlist
{
	list-style-position: inside;
	overflow: auto;
	height: 250px;
	border-bottom: 5px solid #000;
	list-style-type: circle;
}
ul.multifileuploaderlist li
{
	border-bottom: 1px solid #cac6c6;
}
ul.multifileuploaderlist li input
{
	margin: 2px auto 2px 10px;
}
.multifileuploaderlist li img
{
	margin: auto auto auto 10px;
	cursor: pointer;
}
div.filebrowser-explorer
{
	overflow: auto;
	width: 100%;
	height: 150px;
}